<template>
<div class="account">
    <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="已申请职位" name="1">
            <applied></applied>
        </el-tab-pane>
        <el-tab-pane label="关注我的" name="2">
            <followMe></followMe>
        </el-tab-pane>
        <el-tab-pane label="浏览过的职位" name="3">
            <browsedJobs></browsedJobs>
        </el-tab-pane>
    </el-tabs>
</div>
</template>

<script>
import applied from '@/views/components/message_list/appliedposition'
import followMe from '@/views/components/message_list/follow_me'
import browsedJobs from '@/views/components/message_list/browsed_jobs'
export default {
    name: "jobManage",
    data() {
        return {
            activeName: '1',
            tabIndex: 0,
            accountid : this.$store.getters.accountid,
            tabState: 1,
        };
    },
    components:{applied , followMe , browsedJobs},
    methods:{
        handleClick(tab, event) {
            this.tabIndex = tab.idnex;
        },
    },
    created(){
        this.$emit('navIndex', 3);
    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

>>>.el-tabs__nav{
    height: 40px;
}
>>>.el-tabs__item {
    height: 28px;
    font-size: 16px;
    font-weight: 400;
    color: #787878;
    padding: 0 12px;
}
>>>.el-tabs__item.is-active{
    color: #3EABC4;
}
>>>.el-tabs__nav-wrap::after{
    height: 1px;
}
>>>.el-tabs__active-bar{
    background-color: #3EACC4;
}
.account{
    float: right;
    width: 970px;
    height: 840px;
    padding: 30px 35px;
    background-color: #fff;
    color: #787878;
    position: relative;
}
.tab-nav{
    border-bottom: 1px solid #E8E8E8;
    span{
        cursor: pointer;
        display: inline-block;
        height: 28px;
        font-size: 16px;
        font-weight: 400;
        color: #787878;
        margin-right: 20px;
        &.active{
            font-weight: bold;
            color: #3EABC4;
            border-bottom: 2px solid #3EACC4;
        }
    }
}
</style>